<template>
    <div class="Word">
      <div id="left-container" class="left-container">
        <div id="left-title">定义数据区域</div>
        <el-input v-model="searchKey1" placeholder="请输入数据区域关键字搜索" size="small" @input="loadData">
          <template slot="prepend">待添加区域：</template>
        </el-input>
        <el-table :data="daiDataRegionJson" border height="480px" >
          <el-table-column prop="name" label="数据区域" width="160"></el-table-column>
          <el-table-column prop="value" label="显示文字"  width="140"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="primary" size="small" @click="addRegion(scope.$index, scope.row)">添加</el-button>
            </template>
          </el-table-column>
        </el-table>
  
        <el-input v-model="searchKey2" placeholder="请输入数据区域关键字搜索" size="small" style="margin-top: 20px" @input="loadData">
          <template slot="prepend">已添加区域：</template>
        </el-input>
        <el-table :data="dataRegionJson"  id="bkmkTable2" border  height="480px">
          <el-table-column prop="name" label="数据区域"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="danger" size="small" @click="deleteRegion(scope.$index, scope.row)">删除</el-button>
              <el-button type="info" size="small" @click="locateRegion(scope.row)">定位</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
  
      <div id="right-container" class="right-container">
        <div id="podiv" v-html="poHtmlCode"></div>
        <!-- 右侧内容 -->
      </div>
    </div>
  </template>
  
  <script>
  import request from '@/utils/request'
  
  export default {
    data() {
      return {
        searchKey1: '',
        searchKey2: '',
        definedDataRegionJson: [], // 服务器预定义的数据区域
        dataRegionJson: [], // 已添加的数据区域
        daiDataRegionJson: [],//待添加的数据区域
        poHtmlCode: ''
      }
    },
    created(){
        this.fetchData();
    },
    methods: {
      loadData() {
        // 加载数据的逻辑
        this.dataRegionJson = JSON.parse(pageofficectrl.word.DataRegionsAsJson);
  
        this.searchDataRegion(this.definedDataRegionJson, this.dataRegionJson, this.searchKey1);
        this.searchDataRegion2(this.dataRegionJson, this.searchKey2);
      },
      addRegion(index, row) {
        // 添加区域的逻辑
        pageofficectrl.word.AddDataRegion(row.name, row.value);
        this.daiDataRegionJson.splice(index, 1); // 待添加数据区域的数据删除一个对象
        pageofficectrl.word.RefreshDataRegionList(); // 刷新当前已添加到文档中的数据区域
        let newItem = {};
        newItem.name = row.name;
        newItem.value = row.value;
        this.dataRegionJson.push(newItem); // 已添加数据区域新增一个对象
      },
      deleteRegion(index, row) {
        // 删除区域的逻辑
        pageofficectrl.word.RefreshDataRegionList(); // 刷新当前已添加到文档中的数据区域
        let newItem = {};
        newItem.name = row.name;
        newItem.value = pageofficectrl.word.GetValueFromDataRegion(row.name);
        this.daiDataRegionJson.push(newItem); // 待添加数据区域新增一个对象
  
        pageofficectrl.word.DeleteDataRegion(row.name);
        this.dataRegionJson.splice(index, 1); // 已添加数据区域的数据删除一个对象
      },
      locateRegion(row) {
        // 定位区域的逻辑
        pageofficectrl.word.LocateDataRegion(row.name);
      },
      searchDataRegion(definedDRJson, DRJson, kWord1) {
        this.daiDataRegionJson = []; // 每次搜索前置空该数组是为了避免搜索到的数据重复
        for (let i = 0; i < definedDRJson.length; i++) {
          let flag = false; // 表示每个元素definedDataRegionJson都和arr2中去比较，但凡有一个名称相同，则flag=true，如果flag=false，则将此元素添加到新的json数组中
          for (let j = 0; j < DRJson.length; j++) {
          if (definedDRJson[i].name == DRJson[j].name) {
            flag = true;
            break;
          }
        }
        if (!flag) {
          this.daiDataRegionJson.push(definedDRJson[i]);
        }
      }
      if (kWord1 != "" && kWord1 != null) {
        let searchDataRegionJson = []; // 定义一个搜索到的数据的数组

        for (let k = 0; k < this.daiDataRegionJson.length; k++) {
          if (
            this.daiDataRegionJson[k].name
              .toLocaleLowerCase()
              .indexOf(kWord1.toLocaleLowerCase()) > -1
          ) {
            searchDataRegionJson.push(this.daiDataRegionJson[k]);
          }
        }
        this.daiDataRegionJson = searchDataRegionJson;
      }
    },
    searchDataRegion2(drJson, kWord2) {
      if (kWord2 != "" && kWord2 != null) {
        let searchDataRegionJson = []; // 定义一个搜索到的数据的数组
        for (let k = 0; k < drJson.length; k++) {
          if (
            drJson[k].name
              .toLocaleLowerCase()
              .indexOf(kWord2.toLocaleLowerCase()) > -1
          ) {
            searchDataRegionJson.push(drJson[k]);
          }
        }
        this.dataRegionJson = searchDataRegionJson;
      }
    },
    OnPageOfficeCtrlInit() {
      pageofficectrl.AddCustomToolButton("保存", "Save", 1);
    },
    AfterDocumentOpened() {
      this.loadData();
    },
    Save() {
      pageofficectrl.SaveFilePage = "/DataRegionEdit/save";
      pageofficectrl.WebSave();
    },
    fetchData() {
      request({
        url: '/DataRegionEdit/Word',
        method: 'get',
      }).then(response => {
        this.poHtmlCode = response.result.poHtml;
        this.definedDataRegionJson = response.result.dataRegions;
      }).catch(error => {
        console.error('There has been a problem with your fetch operation:', error);
      });
    }
  },
  mounted() {
    window.POPageMounted =this; // 必须
  }
}
</script>

<style scoped>
.Word {
  margin: 0;
  padding: 0;
  display: flex;
}

.left-container {
  display: flex;
  flex-direction: column;
  padding: 10px;
  font-size: 12px;
  height: 100vh;
}

.right-container {
  flex: 1;
  padding: 0px;
  height: 100vh;
}

#podiv {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

#left-title {
  text-align: center;
  font-size: 16px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: solid 1px #ccc;
}
</style>
